import React, {useEffect, useState} from "react";
import {Button, Col, Form, Input, message, Modal, Row,} from 'antd';
import { resetUserPwd,} from "@/clientApi/system/user";
import styles from "./index.module.css";
import { globalMessage } from "@/utils/message";




// 定义组件的 props 类型
interface MyComponentProps {
    open: boolean;
    record:any;
    title?: string;
    OnCanCle: () => void;
}

const ResetPassWordUserView: React.FC<MyComponentProps> = (props) => {
    const [form] = Form.useForm();
    // 表单的值
    const [formData, setFormData] = useState<any>({})

    useEffect(() => {
        if(props.open){
            form.setFieldsValue({
                newPassword: '',
            })
        }

    }, [props.open]);
    function handleCancel() {
        props.OnCanCle()
    }
    const onValuesChange = (changedValues: any, allValues: any) => {
            setFormData((prevState: any) => ({
                ...prevState, ...changedValues
            }));
    };
    const handleSubmit = () => {
        resetUserPwd(props.record.userId,formData.newPassword ).then((res:any) => {
            if (res?.code === 200) {
                 globalMessage().info(`用户${props.record.userName}密码重置成功，新密码是"${formData.newPassword}"`)
            }
            handleCancel()
        });
    }
    return (
        <>
            <Modal
                forceRender
                open={props.open}
                title={props.title}
                footer={null}
                onCancel={() => {
                    handleCancel()
                }}
            >
                <Form form={form}
                      name="resetuser"
                      style={{maxWidth: 800}}
                      onValuesChange={onValuesChange}>
                    <Row gutter={10}>
                        <Col span={24}>
                            <Form.Item
                                name="newPassword"
                                label="新密码"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入新密码!',
                                    },
                                    {
                                        pattern: /^.{5,20}$/,
                                        message: '用户密码长度必须介于 5 和 20 之间',
                                    },
                                    {
                                        validator: (_, value) => {
                                            if (/<|>|"|'|\||\\/.test(value)) {
                                                return Promise.reject(new Error('不能包含非法字符：< > " \' \\ |'));
                                            }
                                            return Promise.resolve();
                                        },
                                    },
                                ]}
                            >
                                <Input />
                            </Form.Item>
                        </Col>

                        <Col span={24}>
                            <Form.Item
                                wrapperCol={{offset: 16, span: 8}}
                            >
                                <div className={styles.buttonClass}>
                                    <Button type="primary" htmlType="submit" onClick={handleSubmit}>确认</Button>
                                    <Button type="primary" onClick={()=>{handleCancel()}}>取消</Button>
                                </div>
                            </Form.Item>
                        </Col>
                    </Row>
                </Form>
            </Modal>

        </>
    )
};
export default ResetPassWordUserView;
